<!--
 @description：订单详情
 @author: Xg
 @date: 2021/6/25 17:02
-->
<template>
  <el-dialog
    :title="title + ' - ' + orderDetailData.endTime + '日 - '+ orderDetailData.storeName"
    :visible="orderDialogVisible"
    width="100%"
    :fullscreen="fullscreen"
    @close="closeDialog"
  >
    <el-row>
      <!-- 订单详情 -->
      <el-col id="dialog-main">
        <div v-if="!userAndFoodData.length" align="center">
          暂无数据
        </div>
        <div class="main-center-bottom">
          <el-row>
            <el-col style="background: white">
              <el-col v-for="(item,index) in userAndFoodData" :key="index" style="margin: 5px;width: 240px;">
                <div class="food-info" style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);padding: 5px">
                  <b style="font-size: 22px;line-height: 40px">{{ item.foodName }}</b>
                  <el-row>
                    <el-rate
                      v-model="item.spicy"
                      :max="3"
                      :low-threshold="lowThreshold"
                      :texts="texts"
                      show-text
                      :icon-classes="iconClasses"
                      :colors="['black','red','red']"
                      disabled-void-icon-class="iconfont icon-lajiao"
                      disabled
                    />
                  </el-row>
                  <el-row style="line-height: 50px">
                    <el-col :span="16" style="font-size: 18px;">
                      数量：<span style="color: red">{{ item.number }}</span>
                    </el-col>
                    <el-col :span="8">
                      ￥<span style="color: red;font-size: 20px">{{ item.price.toFixed(2) }}</span>
                    </el-col>
                  </el-row>
                  <el-row class="order-info">
                    <el-col v-for="(user, index2) in item.userAvatarVOS" :key="index2" align="left" :span="8" class="user-avatar-vos">
                      <el-tag style="font-size: 15px">{{ user.nickName }}:{{ user.number }}</el-tag>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <!--        <el-col v-for="(item,index) in userAndFoodData" v-else :key="index" :span="4" :offset="1" class="card-panel-col-food">-->
        <!--            <div class="card-title-food">-->
        <!--              <div class="image-food-div">-->
        <!--              </div>-->
        <!--              <div class="right-format-food">-->
        <!--                <span class="title-span-food">{{ item.foodName }}</span>-->
        <!--                <div class="middle-food">-->
        <!--                  <span style="font-size: 18px">数量：<span style="color: red">{{ item.number }}</span></span>-->
        <!--                </div>-->
        <!--                <div class="bottom-food">-->
        <!--                  <el-col v-for="(user, index2) in item.userAvatarVOS" :key="index2" :span="8" class="user-avatar-remark">-->
        <!--                    &lt;!&ndash; 用户头像是 user.userAvatar &ndash;&gt;-->
        <!--                    &nbsp;&nbsp;-->
        <!--                    <span style="font-size: 15px">{{ user.nickName }}</span>-->
        <!--                    &lt;!&ndash;                    <span v-if="user.remark" style="font-size: 12px">: {{ user.remark }}</span>&ndash;&gt;-->
        <!--                  </el-col>-->
        <!--                </div>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </el-col>-->
      </el-col>
    </el-row>

    <div slot="footer" class="dialog-footer">
      总价格: <span style="font-size: 40px;color: red">{{ totalPrice.toFixed(2) }}</span>元
      &nbsp;&nbsp;&nbsp;&nbsp;
      总人数: <span style="font-size: 40px;color: red">{{ orderDetailData.totalPerson }}</span>人
    </div>
  </el-dialog>
</template>

<script>
import { getTaskDetail } from '@/api/meal/task'
import { getUserAndFoodByOrder } from '@/api/meal/order'
export default {
  name: 'OrderDialog',
  props: {
    orderDialogVisible: {
      type: Boolean,
      default: false
    },
    taskId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '任务订单详情',
      // 任务详情和商家数据
      orderDetailData: [],
      // 菜品和头像信息
      userAndFoodData: [
        // 后端返回来的数据格式
        // {
        //   foodName: '小龙虾',
        //   foodNumber: 6,
        //   userData: [
        //     {
        //       userName: '管子'
        //     },
        //     {
        //       userName: 'hw'
        //     }
        //   ]
        // },
        // {
        //   foodName: '麻辣烫',
        //   foodNumber: 8,
        //   userData: [
        //     {
        //       userName: '校长'
        //     },
        //     {
        //       userName: '小红'
        //     }
        //   ]
        // }
      ],
      personInfoData: [],
      fullscreen: true,
      texts: ['不辣', '微辣', '重辣'],
      iconClasses: ['iconfont icon-lajiao', 'iconfont icon-lajiao', 'iconfont icon-lajiao'],
      lowThreshold: 1,
      // 计算总价格
      totalPrice: 0.00
    }
  },
  created() {
    if (this.taskId) {
      this.getTaskDetail()
    }
  },
  methods: {
    // 关闭子页面
    closeDialog() {
      this.orderDetailData = []
      this.userAndFoodData = []
      this.$emit('close')
    },
    // 获取任务详情
    getTaskDetail() {
      getTaskDetail({ taskId: this.taskId }).then(res => {
        if (res.code === 200) {
          this.orderDetailData = res.data
          this.orderDetailData.endTime = this.orderDetailData.endTime.substring(0, 10).replace('-', '年').replace('-', '月')
          // if (this.orderDetailData.storeImgVO) {
          //   this.orderDetailData.storeImgVO = 'data:image/jpeg;base64,' + this.orderDetailData.storeImgVO
          // }
        }
      })
      getUserAndFoodByOrder({ taskId: this.taskId }).then(res => {
        const that = this
        if (res.code === 200) {
          this.userAndFoodData = res.data
          this.userAndFoodData.forEach(function(list, index) {
            that.totalPrice += list.price
            // list.userAvatarVOS.forEach(function (list2, index2) {
            //
            // })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .order-info {
    margin-top: 10px;
    height: 80px;
    overflow: auto;
  }
  .user-avatar-vos {
    line-height: 28px
  }
  .card-panel-col-store {
    margin-top: 20px;
    width: 480px;
    height: 160px;
  }
  .card-title-store {
    display: flex;
    align-items: center;
  }
  .image-store {
    height: 140px;
    width: 180px;
  }
  .right-format-store {
    height: 130px;
  }
  .title-span-store {
    font-size: 22px;
    font-weight: bold;
    margin-left: 10px;
  }
  .middle-store {
    margin-top: 20px;
    margin-left: 10px;
  }
  .div-descript-store {
    font-size: 10px;
    margin-left: 10px;
    color: gray;
    margin-top: 60px;
  }
  .card-panel-col-food {
    /*border-style: double;*/
    /*border-width: 5px;*/
    /*border-radius: 30px;*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border-radius: 30px;
    width: 500px;
    height: 200px;
  }
  .card-title-food {
    display: flex;
    align-items: center;
    margin-top: 5px;
  }
  .right-format-food {
    width: 600px;
    height: 120px;
  }
  .image-food-div {
    object-fit: cover;
  }
  .image-food {
    margin-top: 5px;
    height: 180px;
    width: 200px;
    border-radius: 30px;
  }
  .middle-food {
    margin-top: 20px;
    margin-left: 10px;
  }
  .title-span-food {
    margin-bottom: 90px;
    font-size: 23px;
    font-weight: bold;
    margin-left: 10px;
  }
  .userAvatar {
    height: 25px;
    width: 25px;
    border-radius: 30px;
  }
  .bottom-food {
    margin-top: 5px;
    margin-left: 10px;
  }
  .store-info {
    font-size: 25px;
    font-weight: bold;
  }
  .dialog-height {
    height: 89vh;
  }
</style>
